<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col>
          <item-title title="基本信息" />
        </el-col>
        <el-form-item
          label="产品名称："
          style="width: 100%"
        >
          <div>{{ getProductName(priceDetail?.productInfoDetail) }}
          </div>
        </el-form-item>
        <el-form-item
          label="准入模式："
          style="width: 50%"
        >
          <div>{{ getLabel('access_mode', priceDetail?.accessMode) }}</div>
        </el-form-item>
        <el-form-item
          label="价格属性："
          style="width: 50%"
        >
          <div>{{ getLabel('price_type', priceDetail?.priceType) }}</div>
        </el-form-item>
        <el-form-item
          label="适用地区："
          style="width: 50%"
        >
          <area-list-view :areas="priceDetail?.region" />
        </el-form-item>
        <el-form-item
          label="适用终端："
          style="width: 50%"
        >
          <div>{{ getLabel('app_mode', priceDetail?.terminalType) }}</div>
        </el-form-item>
        <el-form-item
          label="市场价："
          style="width: 50%"
        >
          <div>
            <span>{{ priceDetail?.marketPrice }}元</span>
            <span v-if="priceDetail?.productInfoDetail?.sellUnit"> / {{ getLabel('sell_unit',priceDetail?.productInfoDetail?.sellUnit) }}</span>
          </div>
        </el-form-item>
        <el-form-item
          label="终端价："
          style="width: 50%"
        >
          <div>
            <span>{{ priceDetail?.terminalPrice }}元</span>
            <span v-if="priceDetail?.productInfoDetail?.sellUnit"> / {{ getLabel('sell_unit',priceDetail?.productInfoDetail?.sellUnit) }}</span>
          </div>
        </el-form-item>
        <el-form-item
          label="底价："
          style="width: 50%"
        >
          <div>
            <span>{{ priceDetail?.guidingPrice?`${priceDetail?.guidingPrice}元`:'未设置' }}</span>
            <span v-if="priceDetail?.guidingPrice&&priceDetail?.productInfoDetail?.sellUnit"> / {{ getLabel('sell_unit',priceDetail?.productInfoDetail?.sellUnit) }}</span>
          </div>
        </el-form-item>
        <!--
        <el-form-item
          label="价格来源："
          style="width: 50%"
        >
          <div>{{ getLabel('price_source', priceDetail?.priceSource) }}</div>
        </el-form-item>
        <el-form-item
          label="价格来源描述："
          style="width: 50%"
        >
          <div>{{ priceDetail?.priceSourceDesc }}</div>
        </el-form-item>
        -->
        <el-form-item
          label="创建人："
          style="width: 50%"
        >
          <div>{{ priceDetail?.creatorName||'无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 50%"
        >
          <div>{{ dateFormat('yyyy-mm-dd HH:MM', priceDetail?.createdAt) }}</div>
        </el-form-item>
      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item label="其他附件：">
          <div v-if="priceDetail?.attachFiles&&priceDetail?.attachFiles.length">
            <upload-file-view
              ref="fileUploadRef"
              :file-arr="priceDetail?.attachFiles"
              :is-upload="false"
            />
          </div>
          <div v-else>无</div>
        </el-form-item>
      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col>
          <item-title title="修改记录" />
          <operation-view
            :id="id"
            mode="product_price"
          />
        </el-col>

      </el-row>

    </el-form>

  </div>
</template>

<script>
import {inject, reactive, toRefs, watch,} from 'vue'

export default {
  name: 'TerminalPrice',
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const api = inject('api')
    var reactiveData = reactive({
      priceDetail: {
        productInfoDetail:{}
      },
    })
    // 获取产品详情
    const getProductDetail = (id) => {
      api.product.PRODUCT_PRICE_DETAIL(id).then((res) => {
        if (res.code) {
          console.log(res.msg)
        } else {
          reactiveData.priceDetail = res.data.productPriceStrategy
        }
      })
    }
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval !== 0) {
          getProductDetail(newval)
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
